<template>
  <common-page title="部门管理">
    <div style="display: flex;">
        <div class="avue-tree-container">
          <!-- <div class="dept-header">
            <span class="title">部门管理</span>
          </div> -->

          <avue-tree
            class="tree-box"
            ref="tree"
            :filter-node-method="filterNodeMethod"
            v-model="treeForm"
            :data="treeData"
            :option="treeOption"
            @node-click="nodeClick"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <div class="custom-tree-node-content">
                <el-tooltip class="item" effect="dark" :content="(node || {}).label" placement="left">
                  <span class="node-label">{{ (node || {}).label }}</span>
                </el-tooltip>

                <span class="node-menu">
                  <el-tooltip class="item" effect="dark" content="新增" placement="top">
                    <el-button
                      type="text"
                      icon="el-icon-circle-plus-outline"
                      size="mini"
                      :disabled="(node || {}).level > 2"
                      @click.stop="addDept(node)"
                    />
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <el-button type="text" icon="el-icon-edit" :disabled="(node || {}).level <= 1" size="mini" @click.stop="editDept(node)" />
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <el-button :disabled="(node || {}).level <= 1" type="text" icon="el-icon-delete" size="mini" @click.stop="delDept(node)" />
                  </el-tooltip>
                </span>
              </div>
            </span>
          </avue-tree>
        </div>

      <div style="width: 100%;">
        <avue-crud
          ref="crud"
          v-model="form"
          class="crud-table"
          :option="tableOption"
          :data="list"
          :page.sync="page"
          :table-loading="loading"
          :header-cell-class-name="() => 'crud-table-head'"
          :cell-class-name="() => 'crud-cell'"
          @on-load="getList()"
        >
          <template #menuLeft="{ size }">
            <el-button type="primary" :size="size" icon="el-icon-plus" @click="handleAdd">新增职务</el-button>
          </template>
          <template #menu="{ size, row }">
            <el-button type="text" :size="size" @click="handleEdit(row)">编辑</el-button>
            <el-button type="text" :size="size" @click="handleDelete(row)">删除</el-button>
          </template>
        </avue-crud>
      </div>
      </div>
        <AddForm ref="addForm" @ok="treeAddOk"></AddForm>
        <AddPost ref="addPost" @ok="getList"></AddPost>
  </common-page>
</template>

<script>
import { getDepartTree, getTreeByParentId, delDeparts } from '@/api/department'
import { getPage, delPost } from '@/api/post'
import { tableOption, treeOption } from './tableOption'
import AddForm from './components/addForm.vue'
import AddPost from './components/addPost.vue'

export default {
  name: 'Dept',
  components: {
    AddForm,
    AddPost
  },
  data() {
    return {
      treeForm: {
        id: '',
        parentId: '',
        name: ''
      },
      deptId: 'root',
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      list: [],
      loading: true,
      form: {
        id: '',
        departId: '',
        departName: '',
        describe: '',
        leader: '0',
        isLand: '',
        name: '',
        type: '',
        code: ''
        // sort: "",
      },
      isShowSearch: false,
      treeData: [],
      treeList: []
    }
  },
  computed: {
    documentHeight() {
      return this.$store.state.app.documentClientHeight
    },
    tableOption() {
      return tableOption.call(this)
    },
    treeOption() {
      return treeOption.call(this)
    },
    permissionCode() {
      // return this.$store.state.global.permissionCode || [];
    }
  },
  created() {},
  mounted() {
    this.getTree()
    this.getTreeList()
  },
  methods: {
    filterNodeMethod(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleColumn(prop, e) {
      if (prop == 'MENU') {
        this.$set(this.tableOption, 'menu', !e)
      }
      this.$refs.crud.refreshTable()
    },

    getRootType(data, rootCode = '') {
      data.forEach((row) => {
        if (row.code == 'land') {
          rootCode = row.code
        }
        row.rootType = rootCode
        if (row.childList) {
          this.getRootType(row.childList, rootCode)
        }
      })
      return data
    },

    getTree() {
      getDepartTree().then((res) => {
        if (res.code == 200) {
          this.treeData = this.getRootType(res.result)
        }
      })
    },
    getTreeList() {
      getTreeByParentId({ parentId: '0' }).then((res) => {
        this.treeList = res.result[0]?.childList?.filter((row) => row.code === 'land')
        // console.log(this.treeList);
      })
    },
    treeAddOk() {
      this.getTree()
      this.getTreeList()
    },
    getList(option) {
      this.loading = true
      getPage({
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize,
        deptId: this.deptId,
        ...(option || '')
      })
        .then((response) => {
          this.list = response.result.records
          this.page.total = response.result.total
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    },

    handleDelete(row, index) {
      this.$confirm('您确定删除该条数据吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'custom-message-box',
        type: 'warning'
      }).then(() => {
        this.loading = true
        delPost(row.id)
          .then(() => {
            this.getList()
            this.$message.success('删除成功')
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    handleAdd() {
      this.$refs.addPost.open(this.deptId, this.rootType)
    },
    handleEdit(row) {
      this.$refs.addPost.edit(row)
    },
    nodeClick(data) {
      this.rootType = data.rootType
      this.deptId = data.id
      console.log(this.deptId)
      this.getList()
    },
    addDept(node) {
      // console.log(node);
      this.$refs.addForm.open(node)
    },
    editDept(node) {
      // console.log(node);
      this.$refs.addForm.edit(node)
    },
    delDept(node) {
      this.$confirm('您确定删除该条数据吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'custom-message-box',
        type: 'warning'
      }).then(() => {
        this.loading = true
        delDeparts(node.data.id)
          .then(() => {
            this.getTree()
            this.$message.success('删除成功')
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    getPermission(key, row, index) {
      // switch (key) {
      //   case "addBtn":
      //     return this.permissionCode.includes("dept:addpost");
      //   case "editBtn":
      //     return this.permissionCode.includes("dept:editpost");
      //   case "delBtn":
      //     return this.permissionCode.includes("dept:delpost");
      //   default:
      //     return true;
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #5699f1;
  line-height: 28px;
  display: inline;
  &::before {
    content: '';
    width: 28px;
    height: 28px;
    display: inline-block;
    background-image: url('~@/assets/images/title.png');
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 15px;
  }
}
.custom-tree-node {
  width: calc(100% - 30px);
  flex: 1;
  .custom-tree-node-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .node-label {
      width: 100%;
      overflow: hidden;
      padding-right: 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .node-menu {
      padding: 0 10px;
    }
  }
}
.avue-tree-container{
  width: 400px;
  margin-right: 5px;
}
.avue-tree-container ::v-deep .el-tree {
  height: 635px;
}

::v-deep .el-tree-node__content {
  .node-menu {
    display: none !important;
  }
  &:hover {
    .node-menu {
      display: block !important;
    }
  }
}
::v-deep .avue-tree-container .title {
  display: block !important;
}
</style>
